import React , { Component , PropTypes } from 'react';

import styles from './style.scss';

import {
    connect,
    actions,
    Route
} from 'mirrorx';

export default class Header extends Component {
    constructor(){
        super();
    }

    static propTypes = {
        title:PropTypes.string.isRequired,
        position:PropTypes.oneOf(["absolute","fixed","relative"]),
        renderCenter:PropTypes.func,
        renderRight:PropTypes.func,
        renderLeft:PropTypes.func,
        goBack:PropTypes.func,
        color:PropTypes.oneOf(["red","black"])
    };

    static defaultProps = {
        title:"",
        fixed:true,
        position:"relative",
        renderCenter:()=>null,
        renderRight:()=>null,
        renderLeft:()=>null,
        color:"black"
    };

    static height = 46;

    back(){
        actions.routing.goBack()
    }

    getTheme( color ){
        switch (color) {
            case "red" :return styles.bg_red;
            case "black" :return styles.bg_black;
        }
    }

    render(){
        const { title , position , renderLeft , renderCenter , renderRight ,color } = this.props;
        const leftComp = renderLeft(), centerComp = renderCenter(), rightComp = renderRight();
        return(
            <div
                style={{ position }}
                className={classname(
                'clearfix',
                styles.top_header_wrapper,
                this.getTheme(color)
            )}>
                <div className={styles.top_header_left}>
                    {!!leftComp ? leftComp : <div
                        className={styles.top_header_back}
                        onClick={()=>this.back()}
                    />}
                </div>
                <div className={styles.top_header_center}>
                    {!!centerComp ? centerComp : <div className={styles.top_header_title}>{title}</div>}
                </div>
                <div className={styles.top_header_right}>
                    {rightComp}
                </div>
            </div>
        )
    }
}